<!--
*******************************************************************************
 * Copyright © 2022-2023 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<form class="has-validation">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">
            <span>BrokerAddress</span>
            <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
            data-content="tcp://broker-host:1883"></span>
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="BrokerAddress" [(ngModel)]="mqttExport.Parameters.BrokerAddress">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Topic</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="Topic" [(ngModel)]="mqttExport.Parameters.Topic">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">ClientId</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="ClientId" [(ngModel)]="mqttExport.Parameters.ClientId">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Qos</label>
        <div class="col-sm-10">
            <select class="custom-select" name="Qos" [(ngModel)]="mqttExport.Parameters.Qos">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">AutoReconnect</label>
        <div class="col-sm-10">
            <select class="custom-select"  name="AutoReconnect" [(ngModel)]="mqttExport.Parameters.AutoReconnect">
                <option value="false">false</option>
                <option value="true">true</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Retain</label>
        <div class="col-sm-10">
            <select class="custom-select"  name="Retain" [(ngModel)]="mqttExport.Parameters.Retain">
                <option value="false">false</option>
                <option value="true">true</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">
            <span>SkipVerify</span>
            <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
            data-content="Boolean indicating if the certificate verification should be skipped."></span>
        </label>
        <div class="col-sm-10">
            <select class="custom-select"  name="SkipVerify" [(ngModel)]="mqttExport.Parameters.SkipVerify">
                <option value="false">false</option>
                <option value="true">true</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">
            <span>PersistOnError</span>
            <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
            data-content="Indicates to persist the data if the POST fails. Store and Forward must also be enabled if this is set to 'true'."></span>
        </label>
        <div class="col-sm-10">
            <select class="custom-select"  name="PersistOnError" [(ngModel)]="mqttExport.Parameters.PersistOnError">
                <option value="false">false</option>
                <option value="true">true</option>
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">
            <span>AuthMode</span>
            <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
            data-content="Mode of authentication to use when connecting to the MQTT Broker.&lt;br&gt;
            &lt;br&gt;
            none - No authentication required.&lt;br&gt;
            &lt;br&gt;
            usernamepassword - Use username and password authentication. The Secret Store (Vault or InsecureSecrets) must contain the username and password secrets.&lt;br&gt;
            &lt;br&gt;
            clientcert - Use Client Certificate authentication. The Secret Store (Vault or InsecureSecrets) must contain the clientkey and clientcert secrets.&lt;br&gt;
            &lt;br&gt;
            cacert - Use CA Certificate authentication. The Secret Store (Vault or InsecureSecrets) must contain the cacert secret."></span>
        </label>
        <div class="col-sm-10">
              <select class="custom-select"  name="AuthMode" [(ngModel)]="mqttExport.Parameters.AuthMode">
                  <option value="none">none</option>
                  <option value="usernamepassword">usernamepassword</option>
                  <option value="clientcert">clientcert</option>
                  <option value="cacert">cacert</option>
              </select>
        </div>
    </div>
    <div class="form-group row" *ngIf="authModeIsNotNone()">
        <label class="col-sm-2 col-form-label">
            <span>SecretPath</span>
            <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
            data-content="Path in the secret store where to authorization secrets are stored."></span>
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" [class.is-invalid]="!mqttExport.Parameters.SecretPath" name="SecretPath" [(ngModel)]="mqttExport.Parameters.SecretPath">
            <div class="invalid-feedback">
                <small i18n>the SecretPath can't be empty!</small>
            </div>
        </div>
    </div>
</form>